<template>
	<view class="u-p-30">
		<view class="flex" @click="show=true">
			<u-icon name='map'></u-icon>
			<text class="u-m-lr-10">{{area}}</text>
			<u-icon size=10 name='arrow-down-fill'></u-icon>
		</view>
		<u-swiper imgMode='heightFix' height=300 radius=10 class="u-m-t-30" :list="list1" ></u-swiper>
		
		<!-- <image src="" mode="heightFix"></image> -->
		<view class="title u-m-tb-30 u-font-bold u-font-32" v-if="detailinfo.describe">
			灌区简介
			<image class="titleimg" src="/static/bgcolor.jpg" mode=""></image>
		</view>
		<view class="" v-if="detailinfo.describe">
			{{detailinfo.describe}}
		</view>
		
		<view class="title u-m-tb-30 u-font-bold u-font-32">
			工程信息
			<image class="titleimg" src="/static/bgcolor.jpg" mode=""></image>
		</view>
		
		<view class="engineering_information flex-around">
			<view class="engineering_information_item">
				<view class="u-font-bold u-font-40">
					{{detailinfo.channelCount}}
				</view>
				<view class="u-font-26">
					渠系数量
				</view>
			</view>
			<view class="engineering_information_item">
				<view class="u-font-bold u-font-40">
					{{detailinfo.stCount}}
				</view>
				<view class="u-font-26">
					测站数量
				</view>
			</view><view class="engineering_information_item">
				<view class="u-font-bold u-font-40">
					{{detailinfo.wagaCount}}
				</view>
				<view class="u-font-26">
					水闸数量
				</view>
			</view><view class="engineering_information_item">
				<view class="u-font-bold u-font-40">
					{{detailinfo.resCount}}
				</view>
				<view class="u-font-26">
					水库数量
				</view>
			</view><view class="engineering_information_item">
				<view class="u-font-bold u-font-40">
					{{detailinfo.flumCount}}
				</view>
				<view class="u-font-26">
					渡槽数量
				</view>
			</view><view class="engineering_information_item">
				<view class="u-font-bold u-font-40">
					{{detailinfo.insiCount}}
				</view>
				<view class="u-font-26">
					倒虹吸数量
				</view>
			</view><view class="engineering_information_item">
				<view class="u-font-bold u-font-40">
					{{detailinfo.pustCount}}
				</view>
				<view class="u-font-26">
					泵站
				</view>
			</view><view class="engineering_information_item">
				<view class="u-font-bold u-font-40">
					{{detailinfo.headCount}}
				</view>
				<view class="u-font-26">
					渠首数量
				</view>
			</view><view class="engineering_information_item">
				<view class="u-font-bold u-font-40">
					{{detailinfo.culvCount}}
				</view>
				<view class="u-font-26">
					涵洞数量
				</view>
			</view>
		</view>
		
		<view class="title u-m-tb-30 u-font-bold u-font-32">
			管理信息
			<image class="titleimg" src="/static/bgcolor.jpg" mode=""></image>
		</view>
		
		<view class="managerbox u-p-20">
			<view class="">
				所属机构：{{detailinfo.organization}}
			</view>
			<view class="u-m-tb-30">
				负责人：{{detailinfo.commanderInChief}}
			</view>
			<view class="">
				联系方式：{{detailinfo.emergentCommandCenterPhone}}
			</view>
		</view>
		<u-picker :show="show" keyName='irrName' @confirm='change' :columns="columns"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				list1: [
					"https://xxx.com/swiper/swiper1.png",
					"https://xxx.com/swiper/swiper2.png",
					"https://xxx.com/swiper/swiper3.png",
				],
				area:null,
				areaid:0,
				columns:[],
				detailinfo:{}
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			//查看详情
			getdetail(){
				this.$api.get('/getIrrInfoByIrrcode',{
					irrId:this.areaid
				}).then(res=>{
					this.detailinfo = res.data
					this.list1 = [res.data.principal]
				})
			},
			init(){
				this.$api.get('/getIrrList').then(res=>{
					this.columns = [res.data]
					this.area = res.data[0].irrName
					this.areaid = res.data[0].id
					this.getdetail()
					uni.setNavigationBarTitle({
						title:this.area
					})
				})
			},
			change(e){
				this.show = false
				this.area = e.value[0].irrName
				this.areaid = e.value[0].id
				this.getdetail()
				uni.setNavigationBarTitle({
					title:this.area
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.title{
	position: relative;
	.titleimg{
		width: 120rpx;
		height: 20rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}
}
.engineering_information{
	flex-wrap: wrap;
	.engineering_information_item{
		margin-top: 30rpx;
		text-align: center;
		width: 30%;
	}
}
.managerbox{
	background-color: #EFEFEF;
}
</style>